<template>
    <div>
      <el-form ref="form" :model="form" class="recyclingFormC" :rules="rules">
        <el-form-item label="选择卡类:" prop="cardrace">
          <div class="racechoose">
            <el-radio v-for="(item,index) in cardrace" :key="index" v-model="form.cardrace" :label="item" border @change="changeRace">
              {{item}}
            </el-radio>
          </div>
        </el-form-item>
        <el-form-item label="选择卡种:" prop="types">
          <el-radio v-for="(item,index) in types" :key="index" v-model="form.types" border :label="item" @change="changeTypes">
            {{item}}
          </el-radio>
        </el-form-item>
        <el-form-item label="输入数量:" prop="num">
          <el-input-number v-model="form.num" :min="0" ></el-input-number>
        </el-form-item>
        <el-form-item label="输入面值:" prop="price">
          <el-radio v-model="form.price" border label="5"></el-radio>
          <el-radio v-model="form.price" border label="10"></el-radio>
          <el-radio v-model="form.price" border label="20"></el-radio>
          <el-radio v-model="form.price" border label="50"></el-radio>
          <el-radio v-model="form.price" border label="100"></el-radio>
        </el-form-item>
        <el-form-item label="预估价格：">
          <span>{{(form.price*form.num*0.9).toFixed(2)}}元</span>
        </el-form-item>
        <el-form-item prop="check">
          <el-checkbox v-model="check" @change="changeCheck">
            我已阅读并且理解，同意相关法律规定！
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="disable" :loading="loading" @click="submit('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
export default {
  name: "recyclingForm",
  data(){
    return{
      check:false,
      cardrace:[],
      types:[],
      form:{
        cardrace:'',
        types:'',
        num:0,
        price:0,
        username:'',
        totle_price:0
      },
      disable:true,
      rules:{
        cardrace:[{required:true,message:'请选择卡种'}],
        types:[{required:true,message:'请选择卡类'}],
        num:[{required:true}],
        price:[{required:true}],
      },
      loading:false
    }
  },
  mounted() {
    this.getCard();  },
  methods:{
    getCard(){
      this.axios.get('/api/getcard').then(res=>{
        console.log(res.data.data);
        var arr  = [];
        var arr1 = [];
        this.all = res.data.data;
        res.data.data.forEach(e=>{
          arr.push(e.cardrace);
          arr1.push(e.types)
        });
        this.cardrace = Array.from(new Set(arr));
        this.types = Array.from(new Set(arr1));
        // res.data.data.forEach(e=>{
        //   this.types.push(e.types)
        // })
        console.log(this.cardrace);
      }).catch(err=>{
        console.log(err)
      })
    },
    changeRace(e){
      this.form.cardrace = e;
      var arr = [];
      this.all.forEach(val=>{
        if(val.cardrace ==  this.form.cardrace){
          console.log(val.types)
          arr.push(val.types)
        }
        this.types = Array.from(new Set(arr))
      })
      console.log(this.form)
    },
    changeTypes(e){
      this.form.types = e
      console.log(this.form)
    },
    changeCheck(e){
      console.log(e)
      if (e == true){
        this.disable = false;
      } else {
        this.disable = true;
      }
    },
    submit(form){
      this.$refs[form].validate(valid=>{
        if (valid){
          this.loading = true
          this.form.username = window.sessionStorage.getItem('username');
          this.form.Uid = window.sessionStorage.getItem('id');
          this.form.totle_price = this.form.num * this.form.price * 0.9;
          console.log(this.form);
          if (this.form.username === null){
            this.$router.push('/login');
            this.loading = false;
          }else if (this.form.username !== 'admin'){
            if (this.form.num < 1 || this.form.price <= 0 ){
              this.$message.warning('请检查卡券价格或数量');
              this.loading = false
            }else {
              this.axios.post('/api/setRecard',{
                ...this.form,
                state:0
              }).then(res=>{
                console.log(res);
                this.$message.success({
                  showClose:true,
                  message:'提交成功，请等待工作人员与您联系',
                  center:true
                });
                this.loading = false;
              }).catch(err=>{
                console.log(err)
              })
            }
          }else {
            this.$message.warning('请管理员不要乱操作');
            this.loading = false;
          }
        }
      });
      this.form = {num:0,price:0};
      this.check = false
    }
  }
}
</script>

<style scoped>
.recyclingFormC{
  width: 85%;
  margin: 20px auto 0;
  text-align: center;
}
</style>
